<template>
  <div class="h-full flex flex-col justify-between con">
    <div class="equipment-commissioning h-full flex flex-1">
      <div class="equipment-list">
        <a-form class="equipment-form" :model="playConfig" layout="vertical" ref="equipmentForm">
          <!-- <a-form-item
            label="Username"
            name="globalUser"
            :rules="[{ required: true, message: 'Please enter the username.' }]"
          >
            <a-input v-model:value="playConfig.globalUser" />
          </a-form-item> -->
          <a-form-item
            label="AccessKey"
            name="accessKey"
            :rules="[{ required: true, message: 'Please enter the accessKey.' }]"
          >
            <a-input v-model:value="playConfig.accessKey" />
          </a-form-item>
          <a-form-item
            label="SK"
            name="sk"
            :rules="[{ required: true, message: 'Please enter the sk.' }]"
          >
            <a-input v-model:value="playConfig.sk" />
          </a-form-item>
          <a-form-item
            label="设备序列号"
            name="deviceId"
            :rules="[{ required: true, message: 'Please enter the device SN.' }]"
          >
            <a-input
              v-model:value="playConfig.deviceId"
              show-count
              :maxlength="128"
              placeholder="Please enter the device SN."
            />
          </a-form-item>
          <a-form-item
            label="通道号"
            name="channelId"
            :rules="[{ required: true, message: 'Please enter the Channel ID.' }]"
          >
            <a-input
              v-model:value="playConfig.channelId"
              placeholder="Please enter the Channel ID."
            />
          </a-form-item>
          <!-- <a-form-item
            label="Device Password"
            name="devCode"
            :rules="[{ required: true, message: 'Please enter the Device Password.' }]"
          >
            <a-input-password
              v-model:value="playConfig.devCode"
              placeholder="Please enter the Device Password."
            />
          </a-form-item> -->
        </a-form>
      </div>
      <div class="video-area overflow-y-auto w-full">
        <div
          class="video-config flex items-center justify-between"
          :class="{ 'fullscreen-config': isFullScreen, 'show-tools': isShowTools }"
        >
          <div>
            <a-select
              class="text-left mr-8 w140 mode-choose"
              v-model:value="playConfig.mode"
              @dropdownVisibleChange="expand"
            >
              <a-select-option key="live" value="live" title="Live">直播</a-select-option>
              <a-select-option key="video" value="video" title="Record">录像</a-select-option>
            </a-select>
            <a-range-picker
              v-show="playConfig.mode == 'video'"
              class="mr-8"
              v-model:value="rangeTime"
              @change="timeChange"
              show-time
              @openChange="expand"
            />
            <a-select
              class="text-left mr-8 w140"
              v-show="playConfig.mode == 'video'"
              v-model:value="playConfig.businessType"
              @dropdownVisibleChange="expand"
            >
              <a-select-option key="localRecord" value="localRecord">本地录像</a-select-option>
            </a-select>
            <a-select
              class="text-left mr-8 w140"
              v-model:value="playConfig.encryptMode"
              @dropdownVisibleChange="expand"
            >
              <a-select-option :key="0" :value="0">非加密</a-select-option>
            </a-select>
            <a-select
              class="text-left mr-20 w140"
              v-model:value="playConfig.protoType"
              @dropdownVisibleChange="expand"
            >
              <a-select-option key="rtsp" value="rtsp">RTSP</a-select-option>
              <a-select-option key="rtsv" value="rtsv">RTSV</a-select-option>
            </a-select>
            <!-- <span
              >智能帧<a-switch
                v-model:checked="playConfig.assistStream"
                @change="toggleIVS"
            /></span> -->
          </div>
          <a-button type="primary" @click="play" class="items-center"
            ><svg-icon name="go" diySize="12px" class="mr-4" />播放</a-button
          >
        </div>
        <div class="video-window" :class="isFullScreen ? 'fullscreen' : ''">
          <no-plugin-player
            ref="noPluginPlayer"
            :playConfig="playConfig"
            @screen-change="screenChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="EquipmentCommissioning">
  import {
    Select as ASelect,
    SelectOption as ASelectOption,
    Input as AInput,
    InputPassword as AInputPassword,
    Button as AButton,
    Form as AForm,
    FormItem as AFormItem,
    Switch as ASwitch,
    RangePicker as ARangePicker,
    message,
  } from 'ant-design-vue'
  import NoPluginPlayer from './noPluginPlayer.vue'
  import { timeFormat } from '@utils/tools'
  import dayjs from 'dayjs'
  const defaultConfig = {
    mode: 'live',
    protoType: 'rtsv',
    encryptMode: 0,
    businessType: 'localRecord',
    deviceId: '',
    channelId: '',
    beginTime: `${timeFormat(new Date(), 'Y-M-D')} 00:00:00`,
    endTime: `${timeFormat(new Date(), 'Y-M-D')} 23:59:59`,
    streamType: '0',
    assistStream: true,
    globalUser: '',
    accessKey: '',
    devCode: '',
    sk: '',
  }

  const equipmentForm = ref()

  const rangeTime: any = ref([])
  const playConfig = reactive({
    mode: 'live',
    protoType: 'rtsp',
    encryptMode: 0,
    businessType: 'localRecord',
    deviceId: '',
    channelId: '',
    beginTime: `${timeFormat(new Date(), 'Y-M-D')} 00:00:00`,
    endTime: `${timeFormat(new Date(), 'Y-M-D')} 23:59:59`,
    streamType: '0',
    assistStream: true,
    globalUser: '',
    accessKey: '',
    devCode: '',
    sk: '',
  })

  const noPluginPlayer = ref()
  const play = () => {
    equipmentForm.value.validateFields().then(() => {
      noPluginPlayer.value.play()
    })
  }

  const isFullScreen = ref(false)
  /**
   * @method screenChange Screen size change
   */
  const screenChange = (fullScreen: boolean) => {
    isFullScreen.value = fullScreen
  }

  const toggleIVS = () => {
    noPluginPlayer.value.toggleIVS()
  }

  const timeChange = () => {
    if (rangeTime.value[0]) {
      const beginTime = rangeTime.value[0].format('YYYY-MM-DD HH:mm:ss')
      playConfig.beginTime = beginTime
    }
    if (rangeTime.value[1]) {
      const endTime = rangeTime.value[1].format('YYYY-MM-DD HH:mm:ss')
      playConfig.endTime = endTime
    }
  }

  const isShowTools = ref(false)
  let time = 0
  let timer: any = null
  const expand = (isOpen: boolean) => {
    if (isOpen) isShowTools.value = isOpen
    if (time == 0) {
      isShowTools.value = isOpen
      time += 10
      timer = setInterval(() => {
        time += 10
        if (time == 300) {
          time = 0
          clearInterval(timer)
        }
      }, 10)
    }
  }

 onMounted(() => {
    Object.assign(playConfig, defaultConfig)
    playConfig.accessKey = config.client_id
    playConfig.sk = config.client_secret
    rangeTime.value = [
      dayjs(`${timeFormat(new Date(), 'Y/M/D')} 00:00:00`),
      dayjs(`${timeFormat(new Date(), 'Y/M/D')} 23:59:59`),
    ]
  })
</script>

<style lang="less" scoped>
  .con {
    background-color: #eff0f2;
  }
  .equipment-commissioning {
    background: #fff;
    overflow-x: auto;
    .video-area {
      padding: 0 20px 24px;
      min-width: 1150px;
      height: 100vh;
    }
    .mr-8 {
      margin-right: 8px;
    }
    .mr-4 {
      margin-right: 4px;
    }
    .mr-20 {
      margin-right: 20px;
    }
    .w140 {
      width: 140px;
    }
    :deep(.video-config) {
      height: 72px;
      .mode-choose {
        width: auto;
        color: var(--primary-base);
        .ant-select-selector {
          border: none;
          box-shadow: none;
        }
        .ant-select-arrow {
          color: var(--primary-base);
        }
      }
      .ant-picker-range-separator {
        padding: 0 4px;
      }
      .ant-btn {
        display: flex;
      }
      &.fullscreen-config {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #000;
        opacity: 0;
        z-index: 100;
        padding: 0 20px;
        color: #fff;
        height: 60px;
        &:hover {
          opacity: 0.7;
        }
        .mode-choose {
          color: #fff;
          .ant-select-selector {
            background: transparent;
          }
          .ant-select-arrow {
            color: #fff;
          }
        }
        &.show-tools {
          opacity: 0.7;
        }
      }
    }
    .video-window {
      height: calc(100% - 72px);
      &.fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
      }
    }
  }
  .equipment-list {
    min-width: 390px;
    border-right: 1px solid #c5cdd6;
    height: 100vh;
    .equipment-form {
      width: 350px;
      margin: 16px auto;
    }
    .product-area {
      width: 350px;
      margin: 20px auto;
      .ant-select {
        width: 100%;
      }
    }
    .device-channel {
      width: 350px;
      margin: 0 auto 8px;
    }
    .channel-item {
      padding: 8px;
      &:hover {
        background: var(--primary-1);
      }
    }
    .active {
      color: var(--primary-base);
      background: var(--primary-1);
      svg {
        fill: var(--primary-base);
      }
    }
    .ant-divider-horizontal {
      margin: 0;
    }
    .serve-list {
      width: 382px;
      margin: 0 auto;
      padding: 4px 0;
      .ant-collapse-item {
        border: none;
      }
      .ant-list-item {
        border: none;
      }
      :deep(.ant-collapse-content > .ant-collapse-content-box) {
        padding: 4px 0;
        .ant-list-item {
          padding: 12px 20px 12px 40px;
        }
      }
    }
    .channel-list {
      width: 350px;
      margin: 0 auto;
      padding-left: 12px;
      .ant-list-item {
        justify-content: start;
      }
    }
  }
</style>
